<template>
	<div class="warning-page">
		<div class="warning-page-search">
			<el-input
				class="search-input ml-10"
				v-model="searchData.detectionPointName"
				placeholder="请输入检测点名称">
			</el-input>
			<el-input
				class="search-input ml-10"
				v-model="searchData.detectionPointAddress"
				placeholder="请输入检测点地址">
			</el-input>
			<el-input
				class="search-input ml-10"
				v-model="searchData.state"
				placeholder="请输入状态">
			</el-input>
			<SearchOrReset @reset="resetSearch" @getTableData="getTableData"></SearchOrReset>
		</div>
		<div class="warning-page-funcBtns">
			<el-button class="funcBtns-add mt-10 ml-10" type="primary" @click="openPointsDialog"
				>新增</el-button
			>
		</div>
		<div class="warning-page-dataTable mt-10 ml-10">
			<PublicTable :tableData="tableData" :tableHeader="columnObj">
				<template #controls="{row,index}">
					<edit-or-del @edit="edit(row)" @del="del(row.id)"></edit-or-del>
				</template>
			</PublicTable>
			<!-- <el-table :data="tableData" border stripe @selection-change="selectDel">
				<el-table-column type="selection"></el-table-column>
				<el-table-column label="编号" prop="id" width="60"></el-table-column>
				<el-table-column label="检测点名称" prop="monitoringSiteName"></el-table-column>
				<el-table-column label="检测点地址" prop="monitoringSiteAddress"></el-table-column>
				<el-table-column label="实时功率" prop="realTimePower" width="80"></el-table-column>
				<el-table-column
					label="实时电压"
					prop="realTimeVoltage"
					width="80"></el-table-column>
				<el-table-column label="状态" prop="state"></el-table-column>
				<el-table-column label="上报时间" prop="upTime"></el-table-column>
				<el-table-column label="备注" prop="remark"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="success" @click="edit(scope.row)" class="mr-10">
							修改
						</el-button>
						<el-popconfirm title="确定删除该用户吗？" @confirm="del(scope.row.id)">
							<el-button type="danger" slot="reference"> 删除 </el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table> -->
		</div>
		<div class="warning-page-paging mt-10">
			<el-pagination
				:page-sizes="[5, 10, 15, 20]"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page="pageNum"
				:page-size="pageSize"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
		<el-dialog
			class="pointsDialog"
			:title="dialogTitle"
			:visible.sync="pointsDialogVisible"
			width="30%">
			<el-form ref="form" :rules="rules" :model="form">
				<el-form-item prop="monitoringSiteName">
					<el-input
						placeholder="请输入检测点名称"
						v-model="form.monitoringSiteName"></el-input>
				</el-form-item>
				<el-form-item prop="monitoringSiteAddress">
					<el-input
						placeholder="请输入检测点地址"
						v-model="form.monitoringSiteAddress"></el-input>
				</el-form-item>
				<el-form-item prop="realTimePower">
					<el-input placeholder="请输入实时功率" v-model="form.realTimePower"></el-input>
				</el-form-item>
				<el-form-item prop="realTimeVoltage">
					<el-input
						placeholder="请输入实时电压"
						v-model="form.realTimeVoltage"></el-input>
				</el-form-item>
				<el-form-item prop="state">
					<el-input placeholder="请输入状态" v-model="form.state"></el-input>
				</el-form-item>
				<el-form-item prop="remark">
					<el-input placeholder="请输入备注" v-model="form.remark"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="closePointsDialog">取消</el-button>
				<el-button type="primary" @click="save">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import SearchOrReset from '../../components/Buttons/SearchOrReset.vue'
import PublicTable from '../../components/Tables/PublicTable.vue';
import EditOrDel from '../../components/Buttons/EditOrDel.vue';
// import { getBaseData,saveData,deleteData } from '@/api/EnergyWarning';
import { getBaseData, saveData, deleteDataS } from "@/api/Common";
import { columnObj } from "@/assets/js/tableConfig/TableColumns";

export default {
	name: "EnergyWarning",
	components:{
		SearchOrReset,
		PublicTable,
		EditOrDel
	},	
	data() {
		return {
			pageNum: 1,
			pageSize: 5,
			total: 5,
			dialogTitle: "添加能效检测点",
			tableData: [], //表格数据
			columnObj: [],	//表格列配置
			pageObj: {				//分页组件配置
				position: "center",
				total: 100,
				pageData: {
					page: 1,
					size: 10,
				},
			},
			form: {},
			rules: {
				monitoringSiteName: [
					{ required: true, message: "请输入检测点名称", trigger: "blur" },
				],
				monitoringSiteAddress: [
					{ required: true, message: "请输入检测点地址", trigger: "blur" },
				],
				realTimePower: [{ required: true, message: "请输入实时功率", trigger: "blur" }],
				realTimeVoltage: [{ required: true, message: "请输入实时电压", trigger: "blur" }],
				state: [{ required: true, message: "请输入状态", trigger: "blur" }],
			},
			batchDeletion: [],
			searchData: {
				//搜索框数据
				detectionPointName: "", //检测点名称
				detectionPointAddress: "", //检测点地址
				state: "", //状态
			},
			pointsDialogVisible: false,
		};
	},

	created() {
		this.getTableData();
	},

	methods: {
		// 获取数据
		getTableData() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				monitoringSiteName: this.searchData.detectionPointName,
				monitoringSiteAddress: this.searchData.detectionPointAddress,
				state: this.searchData.state,
			};
			getBaseData("/efficiencyWarning/search", params)
				.then((res) => {
					console.log(res);
					this.tableData = res.data.list;
					this.setTableColumn();
					// console.log(this.columnObj);
					// console.log("columns", propArray);
					console.log("columnObj", this.columnObj);
					this.total = res.data.total;
					this.pageObj.total = res.data.total;
				})
				.catch((err) => {
					console.log(err);
				});
		},
		// 设置table的所需的表列数据
		setTableColumn() {
			// 获取prop要传的键
			let columns = this.tableData[0];
			// 设置table的所需的label
			const labelValues = [
				"编号",
				"检测点名称",
				"检测点地址",
				"实时功率",
				"实时电压",
				"状态",
				"上报时间",
				"备注",
			];
			// 生成一个新的数组，含有以下配置项
			let propArray = Object.keys(columns).map((key, index) => {
				return {
					prop: `${key}`,
					label: labelValues[index],
					align: "center",
					width: "",
					text: true,
				};
			});
			propArray[0].width = '50'
			propArray.push({
				prop:'',
				label:'操作',
				align:'center',
				slot:'controls'
			})
			this.columnObj = propArray;
		},
		//每页显示的条目数变化
		handleSizeChange(pageSize) {
			this.pageSize = pageSize;
			this.getTableData();
		},
		//当前页数变化
		handleCurrentChange(pageNum) {
			this.pageNum = pageNum;
			this.getTableData();
		},
		//重置搜索框
		resetSearch() {
			for (let key in this.searchData) {
				if (this.searchData.hasOwnProperty(key)) {
					this.searchData[key] = "";
				}
			}
			console.log(this.searchData);
			this.getTableData();
		},
		// 打开弹窗
		openPointsDialog() {
			this.dialogTitle = "添加能效检测点";
			this.pointsDialogVisible = true;
			this.form = {};
		},
		// 关闭弹窗
		closePointsDialog() {
			this.pointsDialogVisible = false;
			this.form = {};
			this.getTableData();
		},
		// 确认添加 保存
		save() {
			if (
				(this.form.monitoringSiteName != "") &
				(this.form.monitoringSiteAddress != "") &
				(this.form.realTimePower != "") &
				(this.form.realTimeVoltage != "") &
				(this.form.state != "")
			) {
				// this.request.post("/efficiencyWarning/addOrUpdateInfo", this.form)
				saveData("/efficiencyWarning/addOrUpdateInfo", this.form)
					.then((res) => {
						console.log(res);
						if (res.code === "200") {
							this.$message.success("保存成功！");
							this.closePointsDialog();
							this.getTableData();
						} else {
							this.$message.error("保存失败！");
						}
					})

					.catch((err) => {
						console.log(err);
					});
			} else {
				this.$message.warning("请填写完整！");
			}
		},
		// 修改
		edit(val) {
			console.log(val);
			this.dialogTitle = "修改能效检测点";
			this.pointsDialogVisible = true;
			this.form = val;
		},
		// 删除
		del(id) {
			deleteDataS("/efficiencyWarning/deleteInfo/" + id)
				.then((res) => {
					if (res.code === "200") {
						this.$message.success("删除成功！");
						this.getTableData();
					} else {
						this.$message.error("删除失败！");
					}
				})
				.catch((err) => {
					console.log(err);
				});
		},
		selectDel(val) {
			this.batchDeletion = val;
		},
	},
};
</script>

<style lang="scss" scoped>
.warning-page {
	.warning-page-search {
		display: flex;
		align-items: center;
		.search-input {
			width: 300px;
		}

		.search-button {
		}

		.reset-button {
		}
	}

	.warning-page-funcBtns {
		.funcBtns-add {
		}
	}

	.warning-page-dataTable {
	}

	.warning-page-paging {
		text-align: center;
	}

	.pointsDialog {
		span {
		}
	}
}
</style>
